<template>
  <div id="menu">
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      :collapse="$store.state.iscollapse"
      @select="selectFn"
    >
      <template v-for="(item,index) in menuList">
        <template v-if="item.children">
          <el-submenu :index="index+''" :key="index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item
              v-for="(sonItem,sonIndex) in item.children"
              :key="sonIndex"
              :index="sonItem.path"
            >{{sonItem.name}}</el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :key="index" :index="item.path">
            <el-badge is-dot>
            <i class="el-icon-message-solid"></i>
            </el-badge>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultActive: sessionStorage.getItem("menupath") || "/home",
      menuList: [
        {
          name: "项目管理",
          icon: "el-icon-s-operation",
          children: [
            {
              name: "项目大纲",
              path: "/home"
            },
            {
              name: "新增需求计划",
              path: "/change"
            },
            {
              name: "需求计划审核",
              path: "/planReview"
            },
            {
              name: "计划分配",
              path: "/planDis"
            },
            {
              name: "自己的计划",
              path: "/ownPlan"
            },
            {
              name: "自己的项目",
              path: "/ownProject"
            },
            {
              name: "项目进度查询",
              path: "/progress"
            }
          ]
        },
        {
          name: "人员管理",
          icon: "el-icon-user",
          children: [
            {
              name: "权限分配",
              path: "/limit"
            }
          ]
        },
        {
          name: "加班管理",
          icon: "el-icon-tickets",
          children: [
            {
              name: "加班申请",
              path: "/overtimeApply"
            },
            {
              name: "加班审核",
              path: "/overtimeAudit"
            },
            {
              name: "加班列表",
              path: "/overtimeList"
            }
          ]
        },
        
        {
          name: "消息提醒",
          icon: "el-icon-user",
          path: "/messageAlert"
        }
      ]
    };
  },
  methods: {
    selectFn(index, indexpath) {
      const path = indexpath.length==1 ? indexpath[0] : indexpath[1];
      sessionStorage.setItem("menupath", path);
    }
  }
};
</script>

<style lang="scss" scoped>
#menu {
  flex: 0 0 240px;
  position: relative;
  height: 100%;
  background-color: #344a5f;
  box-sizing: border-box;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    // width: 240px;
    // min-width: 170px;
  }
}
</style>
